<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./js/jquery-1.12.4.js"></script>
    <script src="./js/layer/layer.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
    <link rel="stylesheet" href="./css/base.css" />
    <script src="./js/vue.js"></script>

    <style>
      table,
      tr,
      td,
      th {
        border: 1px solid #000;
      }

      table {
        margin: 0 auto;
        width: 1200px;
        border-spacing: 0px;
        border-collapse: collapse;
        text-align: center;
      }

      table img {
        width: 40px;
        height: 30px;
      }
    </style>
    <title>Document</title>
  </head>

  <body>
    <div style="width: 1200px; margin: 10px auto">
      <img src="./images/log4.png" alt="" style="width: 100%" />
    </div>
    <div id="app">
      <table>
        <thead>
          <tr>
            <th>图片</th>
            <th>名称</th>
            <th style="width: 100px">价格</th>
            <th style="width: 100px">尺码</th>
            <th>数量</th>
            <th style="width: 100px">金额</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody id="tab">
          <tr v-for="(item,index) in list" :key="item.cid">
            <td>
              <img :src="item.curl" alt="" />
            </td>
            <td v-text="item.cname">名称</td>
            <td v-text="item.cprice">价格</td>
            <td style="width: 100px">{{ item.csize }}</td>
            <td>
              <button @click="sub(index)">-</button>
              <input v-model="item.cnumber" style="width: 100px" />
              <button @click="sup(index)">+</button>
            </td>
            <td v-text="item.cmoney">金额</td>
            <td>
              <a @click.prevent="del(index)">删除</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div style="width: 1200px; margin: 10px auto">
      <img src="./images/log7.png" alt="" style="width: 100%" />
    </div>
    <script>
      let vm = new Vue({
        async created() {
          // 类似与页面的onload事件,created是Vue的onload事件
          let uid = JSON.parse(localStorage.getItem("userinfo") || "{}").id;
          let res = await $.ajax({
            url: `/api/getcarts/${uid}`,
            headers: {
              token: localStorage.getItem("token"),
            },
          });
          console.log(res);
          this.list = res.data;
        },
        el: "#app",
        data: {
          list: [],
        },
        methods: {
          async sub(index) {
            if (this.list[index].cnumber <= 1) {
              return;
            }
            this.list[index].cnumber--;
            this.list[index].cmoney =
              this.list[index].cnumber * this.list[index].cprice;
            //发送ajax
            // 购物车id, 数量
            let result = await $.ajax({
              url: "/api/modifiy",
              type: "post",
              headers: {
                token: localStorage.getItem("token"),
              },
              data: {
                cid: this.list[index].cid,
                cnumber: this.list[index].cnumber,
              },
            });
            // console.log(result);
            layer.msg(result.msg);
          },
          async sup(index) {
            this.list[index].cnumber++;
            this.list[index].cmoney =
              this.list[index].cnumber * this.list[index].cprice;
            //发送ajax
            // 购物车id, 数量

            //发送ajax
            // 购物车id, 数量
            let result = await $.ajax({
              url: "/api/modifiy",
              type: "post",
              headers: {
                token: localStorage.getItem("token"),
              },
              data: {
                cid: this.list[index].cid,
                cnumber: this.list[index].cnumber,
              },
            });
            // console.log(result);
            layer.msg(result.msg);
          },
          del(index) {
            let self = this;
            let cid = self.list[index].cid;
            layer.confirm(
              "确定要删除吗?",
              {
                btn: ["确定", "取消"],
              },
              (idx) => {
                layer.close(idx);
                self.list.splice(index, 1);
                $.ajax({
                  url: "/api/delete",
                  type: "post",
                  headers: {
                    token: localStorage.getItem("token"),
                  },
                  data: { cid },
                }).then(function (result) {
                  layer.msg(result.msg);
                });
              },
              () => {}
            );
          },
        },
      });
    </script>
  </body>
</html>
